<template>
  <div ref="formSlot">
    <slot>
    </slot>
    <el-form :model="form" v-show="showStateForm">
      <el-row :gutter="gutter">
        <el-col :span="span"
                v-if="option[0].visible"
                ref="order1">
          <el-form-item :label="option[0].name"
                        prop="typeCode"
                        :rules="[{required:true,message:'请选择单据类型',trigger:'submit'}]">
            <el-select v-model="form.typeCode"
                       @change="changeType"
                       :disabled="!avueFormIsAdd || option[0].disabled">
              <el-option v-for="item in typeList"
                         :key="item.uniqueCode"
                         :label="item.typeName"
                         :value="item.uniqueCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="span"
                v-if="option[1].visible"
                ref="order2">
          <el-form-item :label="option[1].name">
            <el-select v-model="form.stateCode"
                       :rules="[{required:true,message:'请选择单据状态',trigger:'submit'}]"
                       :disabled="avueFormIsAdd || option[1].disabled">
              <el-option v-for="item in statusList"
                         :key="item.uniqueCode"
                         :label="item.stateName"
                         :value="item.uniqueCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="span"
                v-if="option[2].visible"
                ref="order3">
          <el-form-item :label="option[2].name">
            <el-select v-model="form.auditState"
                       :disabled="!isManual || option[2].disabled">
              <el-option v-for="item in auditList"
                         :key="item.code"
                         :label="$store.getters.language === 'en_US'?item.descriptionEn:item.description"
                         :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getSysbusitypeByTableName, getBusistateByTableName, getInfo, getFirstState } from '../../api/setting/busiColumn'
import { getAuditStateList } from '../../api/processManagement/flowTemp'

export default {
  props: {
    tableName: {
      type: String,
      required: true,
      remark: '<span class="required-remark">*</span> 业务资源实体的表名',
      values: ''
    },
    objectId: {
      type: [Number, String],
      default: 0,
      remark: '当前业务对象的主键id',
      values: ''
    },
    form: {
      required: true,
      type: Object,
      remark: '<span class="required-remark">*</span> 表单数据对象form',
      values: ''
    },
    order: {
      type: Array,
      default: () => {
        return [1, 2, 3]
      },
      remark: '排序',
      values: ''
    },
    option: {
      type: Array,
      default: () => {
        return [{
          name: '单据类型',
          visible: true,
          disabled: false
        }, {
          name: '单据状态',
          visible: true,
          disabled: false
        }, {
          name: '审核状态',
          visible: true,
          disabled: false
        }]
      },
      remark: '自定义显示<br/>name：label名称<br/>visible：是否显示<br/>disabled：是否禁用',
      values: ''
    },
    gutter: {
      type: Number,
      default: 20,
      remark: '栅格间隔',
      values: ''
    },
    span: {
      type: Number,
      default: 6,
      remark: '栅格占据的列数',
      values: ''
    },
    // 是否组件文档demo示例
    isComponentDemo: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    objectId: {
      handler: 'getData'
    },
  },
  beforeDestroy () {
    this.$store.commit('SET_TYPEID', '')
  },
  data () {
    return {
      showStateForm: false,
      test: '',
      stateId: '',
      typeList: [],
      statusList: [],
      auditList: [],
      avueFormIsAdd: false,
      isManual: false,
      data: {}
    }
  },
  mounted () {
    if(this.isComponentDemo){
      // 是否组件文档demo示例
      this.avueFormIsAdd = true
      if (this.order.length === 3)
        if (this.option.length === 3)
          this.order.some((res, index) => {
            if (!this.option[index].visible) return false
            if (this.$refs.formSlot.getElementsByClassName('avue-form__group')[0]) this.$refs.formSlot.getElementsByClassName('avue-form__group')[0].insertBefore(this.$refs['order' + (index + 1)].$el, this.$refs.formSlot.getElementsByClassName('el-col')[res])
            else this.$refs.formSlot.getElementsByClassName('el-row')[0].insertBefore(this.$refs['order' + (index + 1)].$el, this.$refs.formSlot.getElementsByClassName('el-col')[res])
          })
        else console.error('option参数错误、请查看文档修正')
      else console.error('order参数错误、请查看文档修正')
    } else {
      this.getData().then(() => {
        if (this.order.length === 3)
          if (this.option.length === 3)
            this.order.some((res, index) => {
              if (!this.option[index].visible) return false
              if (this.$refs.formSlot.getElementsByClassName('avue-form__group')[0]) this.$refs.formSlot.getElementsByClassName('avue-form__group')[0].insertBefore(this.$refs['order' + (index + 1)].$el, this.$refs.formSlot.getElementsByClassName('el-col')[res])
              else this.$refs.formSlot.getElementsByClassName('el-row')[0].insertBefore(this.$refs['order' + (index + 1)].$el, this.$refs.formSlot.getElementsByClassName('el-col')[res])
            })
          else console.error('option参数错误、请查看文档修正')
        else console.error('order参数错误、请查看文档修正')
      })
    }


  },
  methods: {
    getData () {
      return new Promise((resolve, reject) => {
        if (!this.tableName) {
          console.error('请传入tableName');
          return
        }
        this.avueFormIsAdd = !!!this.objectId
        if (!!this.objectId) getInfo(this.objectId === 0 ? null : this.objectId, this.tableName).then(res => {
          if (!this.validatenull(res.data.data)) {
            this.data = res.data.data
            this.$set(this.form, 'auditState', this.data.auditState)
            this.$set(this.form, 'auditName', this.data.auditName)
            this.$set(this.form, 'stateCode', this.data.stateCode)
            this.$set(this.form, 'stateName', this.data.stateName)
            this.$set(this.form, 'typeCode', this.data.typeCode)
            this.$set(this.form, 'typeName', this.data.typeName)
            this.$set(this.form, 'typeId', this.data.typeId)
            this.$store.commit('SET_TYPEID', this.data.typeId)
            this.stateId = this.data.stateId
          }
        })
        getSysbusitypeByTableName(this.tableName).then(res => {
          this.typeList = res.data.data
          this.$emit('update-type-list', this.typeList)
          return getAuditStateList()
        }).then(res => {
          this.auditList = res.data.data
          this.$emit('update-audit-list', this.auditList)
          this.changeType(this.form.typeCode)
          resolve()
        })
      })
    },
    changeType (value) {
      if (!value || this.typeList.length < 1) return
      if (!!this.objectId) getBusistateByTableName(this.tableName, this.typeList.filter(res => res.uniqueCode === value)[0].id, this.stateId).then(res => {
        this.statusList = [{ uniqueCode: this.data.stateCode, stateName: this.data.stateName }, ...res.data.data]
        this.$emit('update-state-list', this.statusList)
      })
      else getFirstState(this.tableName, this.typeList.filter(res => res.uniqueCode === value)[0].id).then(res => {
        if (!res.data.data) return
        this.statusList = [res.data.data]
        this.$emit('update-state-list', this.statusList)
        if (this.statusList[0]) this.form.stateCode = this.statusList[0].uniqueCode
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
